<template>
    <div class="video-item">
        <div class="v-i-pic">
            <!-- 3.图片懒加载修改img :src -> v-lazy -->
            <a :href="'/o/video/VideoDetail/' + video.id">
                <img v-lazy="downloadUrl + video.videoCover" />
                <span class="videoDuration">{{ timeHandle(video.videoDuration) }}</span>
            </a>
        </div>

        <!-- 解析数据中的html标签 -->
        <div class="v-i-title">
            <a :href="'/o/video/VideoDetail/' + video.id">{{ video.videoTitle }}</a>
        </div>

        <!-- 标签 -->
        <div class="tags">
            <span class="tags-watch">
                <i class="iconfont icon-bofangliang1"></i>
                {{ tenThousand(video.videoPlay) }}
            </span>
            <span class="tags-date">
                <i class="iconfont icon-history"></i>
                {{ dateTransform(video.createTime) }}
            </span>
        </div>

        <!-- up主 -->
        <!-- <div class="b-up" @click="routerJump('/c/user/userCenter?userId=' + item.userId)">
            <img v-if="video.userCover" class="up-cover" v-lazy="downloadUrl + video.userCover" alt="" />
            <i v-else class="iconfont icon-icon_bilibili-circle up-cover"></i>
            <span>{{ video.nickName }}</span>
        </div> -->

        <div class="v-button">
            <el-button class="apply" @click="deleteUserCollection(video.id)" v-if="isCollection" size="small"
                type="primary">取消收藏</el-button>
            <el-button class="apply" @click="addUserCollection(video.id)" v-else size="small" type="primary">收藏</el-button>
        </div>
    </div>
</template>

<script>
import { addUserCollection, deleteUserCollection } from "@/api/user/userCollection";

export default {
    name: "video-item",
    props: {
        video: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            userId: this.$store.getters.userInfo.id,
            isCollection: true,
            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
        };
    },
    computed: {
        // 计算数量过万就转换
        tenThousand() {
            // 计算属性是一个属性不是一个方法, 使用函数返回
            return (count) => {
                if (count >= 100000000) {
                    return (count / 100000000).toFixed(1) + "亿";
                }
                return count >= 10000 ? (count / 10000).toFixed(1) + "万" : count;
            };
        },

        // 日期格式转换
        dateTransform() {
            return (date) => {
                const da = new Date(date);
                let year = da.getFullYear();
                let month = da.getMonth() + 1;
                month = month < 10 ? "0" + month : month;
                let day = da.getDate();
                day = day < 10 ? "0" + day : day;
                return year + "-" + month + "-" + day;
            };
        },
    },

    methods: {
        addUserCollection() {
            let collection = {
                "userId": this.userId,
                "videoId": this.video.id,
            }
            addUserCollection(collection).then((res) => {
                this.isCollection = true;
            });
        },
        deleteUserCollection() {
            let collection = {
                "userId": this.userId,
                "videoId": this.video.id,
            }
            deleteUserCollection(collection).then((res) => {
                this.isCollection = false;
            });
        },

        // 处理时间
        timeHandle(time) {
            if (isNaN(parseFloat(time)) || !isFinite(time)) { return time; }
            let timeFormat = "";
            let isFirst = 0;
            function allTime(time) {
                if (time < 60) {
                    let ss;
                    if (time > 0) {
                        if (time < 10) {
                            time = "0" + time;
                        }
                        ss = isFirst == 0 ? "0:" + time : time;
                    } else if (time == 0) {
                        ss = "00"
                    } else { ss = "" }
                    timeFormat = timeFormat + ss;
                    return;
                } else if (time < 3600) {
                    let mm = Math.floor(time / 60);
                    mm = mm <= 10 & isFirst > 0 ? "0" + mm : mm;
                    isFirst++;
                    timeFormat = timeFormat + mm + ":";
                    allTime(time - mm * 60);
                } else {
                    let hh = Math.floor(time / 3600);
                    hh = hh <= 10 ? "0" + hh : hh;
                    isFirst++;
                    timeFormat = timeFormat + hh + ":";
                    allTime(time - hh * 3600);
                }
            }
            allTime(time);
            return timeFormat;
        },

        routerJump(id) {
            this.$router.push(`${id}`);
        },
    },
};
</script>

<style scoped>
.video-item {
    box-sizing: border-box;
    width: 180px;
    height: 200px;
    border: 1px solid #e5e9ef;
    border-radius: 6px;
    overflow: hidden;
    font: 12px Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB,
        Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

.v-i-pic {
    position: relative;
    overflow: hidden;
    max-height: 100px;
}

.v-i-pic img {
    display: block;
    /* width: calc(100% + 1px); */
    width: 100%;
    height: 100%;
}

.videoDuration {
    position: absolute;
    bottom: 0;
    right: -1px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.5);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.v-i-title {
    margin: 5px 5px;
    letter-spacing: 1px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    word-break: break-all;
}

.v-i-title a {
    &:hover {
        color: #52aae2;
    }
}

.tags {
    margin: 0 5px;
    color: #99a2aa;
}

.tags-date {
    float: right;
}

.b-up {
    margin: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.up-cover {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}

.v-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
}
</style>